<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.4.6/css/swiper.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/hover.css/2.3.1/css/hover-min.css">
    <link rel="stylesheet" href="../css/global.css">
    <title>产品列表页</title>
</head>

<body>
    <div class="header">
        <div class="container d-flex justify-content-between align-items-center">
            <div class="logo">
                <h2>XIANPANSHI</h2>
                <h1>&emsp;|&emsp;西安盘石诚信认证</h1>
            </div>
            <ul class="nav">
                <li class="nav__item"><a class="nav__item-link nav__active" href="#">首页</a></li>
                <li class="nav__item"><a class="nav__item-link" href="#">服务项目</a> </li>
                <li class="nav__item"><a class="nav__item-link" href="#">服务案例</a></li>
                <li class="nav__item"><a class="nav__item-link" href="#">新闻资讯</a></li>
                <li class="nav__item"><a class="nav__item-link" href="#">关于我们</a></li>
                <li class="nav__item"><a class="nav__item-link" href="#">商城</a></li>
            </ul>
        </div>
    </div>
    <div class="ad">
        <img src="../img/ad/demo1.jpg">
    </div>
    <div class="main main--list">
        <div class="container">
            <div class="main-left">
                <div class="sidebar">
                    <div class="sidebar-title">服务项目</div>
                    <ul class="sidebar-list">
                        <li class="sidebar-list__item">
                            <a class="sidebar-list__item-link sidebar-list__active"  href="#">产品认证</a>
                        </li>
                        <li class="sidebar-list__item">
                            <a class="sidebar-list__item-link"  href="#">资质认证</a>
                        </li>     
                        <li class="sidebar-list__item">
                            <a class="sidebar-list__item-link"  href="#">体系认证</a>
                        </li>    
                        <li class="sidebar-list__item">
                            <a class="sidebar-list__item-link"  href="#">互联网认证</a>
                        </li>                                                                       
                    </ul>
                </div>
            </div>
            <div class="main-right">
                <div class="breadcrumb mb-4">
                    <a href="#">首页</a>&nbsp;
                    <i class="fa fa-angle-double-right"></i>&nbsp;
                    <a href="#">服务项目</a>&nbsp;
                    <i class="fa fa-angle-double-right"></i>&nbsp;
                    <a href="#">体系认证</a>
                </div>
                <ul class="productList row">
                    <li class="productList__item col-auto">
                        <a class="productList__item-link" href="#">
                            <img class="productList__item-img" src="../img/demo/demo_p.jpg">
                            <p class="productList__item-title">标题标题标题</p>
                        </a>
                    </li>
                    <li class="productList__item col-auto">
                        <a class="productList__item-link" href="#">
                            <img class="productList__item-img" src="../img/demo/demo_p.jpg">
                            <p class="productList__item-title">标题标题标题</p>
                        </a>
                    </li>
                    <li class="productList__item col-auto">
                        <a class="productList__item-link" href="#">
                            <img class="productList__item-img" src="../img/demo/demo_p.jpg">
                            <p class="productList__item-title">标题标题标题</p>
                        </a>
                    </li>
                    <li class="productList__item col-auto">
                        <a class="productList__item-link" href="#">
                            <img class="productList__item-img" src="../img/demo/demo_p.jpg">
                            <p class="productList__item-title">标题标题标题</p>
                        </a>
                    </li>         
                    <li class="productList__item col-auto">
                        <a class="productList__item-link" href="#">
                            <img class="productList__item-img" src="../img/demo/demo_p.jpg">
                            <p class="productList__item-title">标题标题标题</p>
                        </a>
                    </li>
                    <li class="productList__item col-auto">
                        <a class="productList__item-link" href="#">
                            <img class="productList__item-img" src="../img/demo/demo_p.jpg">
                            <p class="productList__item-title">标题标题标题</p>
                        </a>
                    </li>                                                                        
                </ul>
                <div class="page">分页占位</div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <ul class="ft-list">
                <li class="ft-list__title">联系我们
                    <hr>
                </li>
                <li class="ft-list__item">
                    <i class="fa fa-envelope"></i>029-87383760
                </li>
                <li class="ft-list__item">
                    <i class="fa fa-envelope"></i>xianpanshi@163.com
                </li>
                <li class="ft-list__item">
                    <i class="fa fa-envelope"></i>西安市碑林区东大街商联大厦638室
                </li>
            </ul>
            <ul class="ft-list ft-list--nav">
                <li class="ft-list__title">友情链接
                    <hr>
                </li>
                <li class="ft-list__item">
                    <a href="#">网站首页</a>
                    <a href="#">服务项目</a>
                </li>
                <li class="ft-list__item">
                    <a href="#">网站案例</a>
                    <a href="#">新闻资讯</a>
                </li>
                <li class="ft-list__item">
                    <a href="#">关于我们</a>
                    <a href="#">在线商城</a>
                </li>
            </ul>
            <ul class="ft-list ft-list--search">
                <li class="ft-list__title">站内搜索
                    <hr>
                </li>
                <li class="ft-list__item position-relative">
                    <input type="text" placeholder="请输入关键字">
                    <i class="fa fa-search"></i>
                </li>
                <li class="ft-list__item">&nbsp;</li>
                <li class="ft-list__item">
                    关注我们：
                    <img class="qricon" src="../img/weibo.png">
                    <img class="qricon" src="../img/weixin.png">
                </li>
            </ul>
        </div>
    </div>
    <div class="copyright">Copyright&nbsp;2018&nbsp;西安盘石信用管理有限公司</div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.4.6/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.23.0/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.23.0/locale/zh-cn.js"></script>
    <script src="https://cdn.bootcss.com/jquery-color/2.1.2/jquery.color.min.js"></script>
    <script src="../js/common.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {});
    </script>
</body>

</html>